<template>
  <Row style="padding: 10px;">
    <Col span="24" order="2">
      <Form ref="formInline" inline :style="{'padding-top': '20px'}">
        <FormItem>
          <Input type="text" placeholder="表名" size="large" style="width: 300px" clearable v-model="search_name">
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="loadTableData" size="large">查询</Button>
        </FormItem>
      </Form>

      <database_table
        :column_header="column_header"
        :table_data="table_data"
        :total_page="total_page"></database_table>

      <!-- 分布工具条 -->
      <Page :total="total_page"
            class="page_class"
            @on-change="change"
            @on-page-size-change="change"></Page>
    </Col>
  </Row>
</template>
<script>
  import database_table from '../utils/table_components_util'

  export default {
    data() {
      return {
        column_header: [
          {
            title: '表名',
            key: 'name',
            align: 'left',
            sortable: true,
            width: 250
          },
          {
            title: '说明',
            key: 'comment',
            align: 'left'
          },
          {
            title: '详情',
            key: 'handler',
            align: 'center',
            width: 100,
            render: (h, params) => {
              return h('div', [
                h('Icon', {
                  props: {
                    type: 'play',
                    size: '20'
                  },
                  style: {
                    marginRight: '5px',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.$emit('childClickMenu', '系统管理', '代码生成', 'columns_list', {"table_name": params.row.name});
                    }
                  }
                })
              ]);
            }
          }
        ],
        table_data: [],
        total_page: 0,
        current_page: 1,
        search_name: ''
      }
    },
    components: {
      database_table: database_table
    },
    created: function () {
      //加载表格数据
      this.loadTableData();
    },
    methods: {
      handle_search_start_data: function (changeValue, date) {
        this.search_start_data = changeValue;
      },
      handle_search_end_data: function (changeValue, date) {
        this.search_end_data = changeValue;
      },
      /**
       * 点击分页，页数标签时调用的方法
       * @param page_num  页码改变的回调，返回改变后的页码
       */
      change: function (page_num) {
        this.current_page = page_num;
        this.loadTableData();
      },
      /**
       * 加载表格数据
       * @param page_num            查询条件：当前页
       * @param search_name         查询条件：角色名称
       */
      loadTableData: function () {
        this.$http.post(this.apiUrl() + "code/grid/", {
          current_page: this.current_page,
          search_name: this.search_name
        }, {
          emulateJSON: true
        }).then((response) => {
          if (response.body.success) {
            this.table_data = response.body.grid;
            this.total_page = response.body.total_count;
          }
        });
      }
    }
  }
</script>
<style scoped>
  .page_class {
    float: right;
    padding-top: 10px;
    padding-bottom: 10px;
  }

</style>
